<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>员工管理系统</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/main.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-info flex-md-nowrap p-0">
    <span class="navbar-brand col-sm-3 col-md-2  mr-0" href="#">
        <img src="${pageContext.request.contextPath}/static/img/1.svg" width="25px" height="22px" style="margin-bottom: 4px" alt="">
        &nbsp;&nbsp;${pageContext.session.getAttribute("Name")}
    </span>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="/logout">登出</a>
        </li>
    </ul>
</nav>
<div class="container-fluid">
    <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="/myInfo/${pageContext.session.getAttribute("Eid")}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
                                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                <polyline points="9 22 9 12 15 12 15 22"></polyline>
                            </svg>
                            个人信息
                        </a>
                    </li>
                    <c:if test="${pageContext.session.getAttribute('Role')=='管理员'}">
                        <li class="nav-item">
                            <a class="nav-link" href="/toMain">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                                员工信息
                            </a>
                        </li>
                    </c:if>
                    <c:if test="${pageContext.session.getAttribute('Role')=='管理员'}">
                        <li class="nav-item">
                            <a class="nav-link" href="/attendance">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                    <line x1="16" y1="13" x2="8" y2="13"></line>
                                    <line x1="16" y1="17" x2="8" y2="17"></line>
                                    <polyline points="10 9 9 9 8 9"></polyline>
                                </svg>
                                员工出勤
                            </a>
                        </li>
                    </c:if>
                </ul>
            </div>
        </nav>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h2 style="border-bottom:3px solid #a0a4a0;margin-bottom: 30px;padding-left: 450px">员工信息管理</h2>
            <div class="row" style="margin-bottom: 30px">
                <div class="col-2">
                    <buttton class="btn btn-success" style="width: 100%" data-toggle="modal" data-target="#addBtn">添加员工</buttton>
                    <div id="addBtn" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <form action="/addEmployee" role="form" method="post" enctype="multipart/form-data" >
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <img src="${pageContext.request.contextPath}/static/img/add.svg" alt="">
                                        <h3 class="modal-title">添加员工</h3>
                                    </div>
                                    <div class="modal-body">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">工号</span>
                                            </div>
                                            <input type="text" name="id" id="id" class="form-control">
                                        </div>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">照片</span>
                                            </div>
                                            <div class="custom-file">
                                                <input type="file" name="img" class="custom-file-input" id="img">
                                                <label class="custom-file-label" for="img">选择图片</label>
                                            </div>
                                        </div>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">姓名</span>
                                            </div>
                                            <input type="text" name="name" id="name" class="form-control">
                                        </div>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">年龄</span>
                                            </div>
                                            <input type="number" name="age" id="age" class="form-control">
                                        </div>
                                        <div class="form-check" style="float: left">
                                            <input class="form-check-input" type="radio" name="sex" id="male" value="男">
                                            <label class="form-check-label" for="male">
                                                男
                                            </label>
                                        </div>
                                        <div class="form-check" style="margin-left:50px;float:left;">
                                            <input class="form-check-input" type="radio" name="sex" id="female" value="女">
                                            <label class="form-check-label" for="female">
                                                女
                                            </label>
                                        </div>
                                        <div class="form-group" style="margin-top: 10px">
                                            <select class="form-control" id="department" name="department">
                                                <option value="技术部">技术部</option>
                                                <option value="人事部">人事部</option>
                                                <option value="财务部">财务部</option>
                                                <option value="后勤部">后勤部</option>
                                                <option value="市场部">市场部</option>
                                            </select>
                                        </div>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">联系方式</span>
                                            </div>
                                            <input type="text" name="phone" id="phone" class="form-control">
                                        </div>
                                    </div>
                                    <div class="modal-body">
                                        <button type="button" class="btn btn-warning " data-dismiss="modal">关闭</button>
                                        <button type="submit" class="btn btn-primary" style="float: right">提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-1"></div>
                <div class="col-8">
                    <form action="/EmployeeLike" class="row" method="post">
                        <div class="input-group col-4">
                            <div class="input-group-prepend">
                                <span class="input-group-text">姓名</span>
                            </div>
                            <input type="text" name="name" class="form-control" placeholder="如：张三" >
                        </div>
                        <div class="input-group col-4">
                            <div class="input-group-prepend">
                                <span class="input-group-text" >部门</span>
                            </div>
                            <input type="text" name="department" class="form-control" placeholder="如：技术部">
                        </div>
                        <button class="btn btn-secondary" type="submit">查找相关</button>
                    </form>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-sm">
                    <thead>
                        <tr>
                            <th>工号</th>
                            <th>照片</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>部门</th>
                            <th>联系方式</th>
                            <th>编辑 &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;删除</th>
                        </tr>
                    </thead>
                    <tbody style="line-height: 30px">
                        <c:forEach var="employee" items="${employees}">
                            <tr>
                                <td>${employee.id}</td>
                                <td><img src="${pageContext.request.contextPath}/static/img/${employee.photo}" width="30px" height="33px" alt=""></td>
                                <td>${employee.name}</td>
                                <td>${employee.age}</td>
                                <td>${employee.sex}</td>
                                <td>${employee.department}</td>
                                <td>${employee.phone}</td>
                                <td>
                                    <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#editBtn${employee.id}">编辑</button>
                                    <div id="editBtn${employee.id}" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <form action="/updateEmployee" role="form" method="post" enctype="multipart/form-data" >
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <img src="${pageContext.request.contextPath}/static/img/edit.svg" width="48px" height="49px" alt="">
                                                        <h3 class="modal-title">编辑员工信息</h3>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="input-group mb-3">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">工号</span>
                                                            </div>
                                                            <input type="text" name="id" value="${employee.id}" class="form-control">
                                                        </div>
                                                        <input type="text" name="photo" value="${employee.photo}" hidden="hidden">
                                                        <div class="input-group mb-3">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <img src="${pageContext.request.contextPath}/static/img/${employee.photo}" width="20px" height="24px" alt="">
                                                                </span>
                                                            </div>
                                                            <div class="custom-file">
                                                                <input type="file" name="img" value="${employee.photo}" class="custom-file-input">
                                                                <label class="custom-file-label" for="img">${employee.photo}</label>
                                                            </div>
                                                        </div>
                                                        <div class="input-group mb-3">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">姓名</span>
                                                            </div>
                                                            <input type="text" name="name" value="${employee.name}" placeholder="${employee.name}" class="form-control">
                                                        </div>
                                                        <div class="input-group mb-3">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">年龄</span>
                                                            </div>
                                                            <input type="number" name="age" value="${employee.age}" placeholder="${employee.age}" class="form-control">
                                                        </div>
                                                        <div class="form-group" style="margin-top: 10px">
                                                            <select class="form-control"  name="sex">
                                                                <option>${employee.sex}</option>
                                                                <c:if test="${employee.sex=='女'}">
                                                                    <option value="男">男</option>
                                                                </c:if>
                                                                <c:if test="${employee.sex=='男'}">
                                                                    <option value="女">女</option>
                                                                </c:if>
                                                            </select>
                                                        </div>
                                                        <div class="form-group" style="margin-top: 10px">
                                                            <select class="form-control"  name="department">
                                                                <option value="${employee.department}">${employee.department}</option>
                                                                <option value="技术部">技术部</option>
                                                                <option value="人事部">人事部</option>
                                                                <option value="财务部">财务部</option>
                                                                <option value="后勤部">后勤部</option>
                                                                <option value="市场部">市场部</option>
                                                            </select>
                                                        </div>
                                                        <div class="input-group mb-3">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">联系方式</span>
                                                            </div>
                                                            <input type="text" name="phone" value="${employee.phone}" placeholder="${employee.phone}" class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="modal-body">
                                                        <button type="button" class="btn btn-warning " data-dismiss="modal">关闭</button>
                                                        <button type="submit" class="btn btn-primary" style="float: right">提交</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <a class="btn btn-danger btn-sm" href="/deleteEmployee/${employee.id}">删除</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </main>
    </div>
</div>
</body>
</html>
